<template>
  <el-table :data="transFormData" size="small"
    style="width: 100%;border-radius: 8px;overflow: hidden;border: 1px solid #e5e5e5;box-sizing: border-box;overflow-x: hidden;"
    :height="tableHeight" :header-cell-style="headerRowStyle" :highlight-current-row="false">
    <el-table-column type="index" label="序号" align="center" width="50">
    </el-table-column>
    <el-table-column prop="projectName" align="center" label="项目名称" width="100">
    </el-table-column>
    <el-table-column prop="tProjectFlows" label="项目流程图" align="center">
      <template slot-scope="scope">
        <div class="flow-box">
          <flowNodeTemp v-for="(item, index) in scope.row.tProjectFlows" :key="item.processSchedule" :color="item.color"
            :title="item.processSchedule" :showLine="index < scope.row.tProjectFlows.length - 1" :blocking="item.blocking"
            :bgColor="item.bgColor" :startTime="item.startTime" :endTime="item.endTime"
            :currentPoint="item.status === '遇到堵点'" :currentPointData="item.tProjectFlowStopList">
          </flowNodeTemp>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="projectDay" label="项目用时" align="center" width="100">
    </el-table-column>
  </el-table>
</template>

<script>
import flowNodeTemp from "./flowNodeTemp.vue";
const blueColor = "#4D82FF";
const redColor = "#FF0000";
const grayColor = "#B8B8B8";
const bbgColor = "#F2F5FE";
const rbgColor = "#FFEEEE";
const gbgColor = "#F5F5F5";
const greenColor = "#0DC807"
const greenBgColor = "#EBF9EF"
export default {
  name: "flowChart",
  components: { flowNodeTemp },
  props: ["curData", "tableHeight", "headerRowStyle"],
  data() {
    return {
      transFormData: [],
    };
  },
  watch: {
    curData: {
      handler(newValue, oldValue) {
        const flows = [
          "洽谈",
          "签约",
          "土地手续",
          "立项审批",
          "其他事项",
          "开工",
        ];
        const nArr = JSON.parse(JSON.stringify(newValue));
        const newData = nArr.map((par, pIndex) => {
          if (par.tProjectFlows && par.tProjectFlows.length > 0) {
            for (let i = 0; i < 6; i++) {
              const flow = par.tProjectFlows[i];
              if (flow && flow.id) {
                if (!flow.processSchedule) {
                  flow.color = grayColor;
                  flow.bgColor = gbgColor;
                  flow.blocking = true;
                  flow.processSchedule = flows[i];
                } else {
                  if (flow.status === '遇到堵点') {
                    flow.color = redColor
                    flow.bgColor = rbgColor
                    flow.blocking = true;
                  }
                  if (flow.status === '顺利推进') {
                    flow.color = greenColor
                    flow.bgColor = greenBgColor
                  }
                  if (flow.status === '已完成') {
                    flow.color = blueColor
                    flow.bgColor = bbgColor
                  }
                  if (flow.status === '未开始') {
                    flow.color = grayColor
                    flow.bgColor = gbgColor
                    flow.blocking = true;
                  }
                }
              } else {
                par.tProjectFlows.push({
                  processSchedule: flows[i],
                  color: grayColor,
                  bgColor: gbgColor,
                  blocking: true,
                });
              }
            }
          }
          return par;
        });
        console.log(newData, 'flow=====')
        this.transFormData = newData;
      },
      deep: true,
    },
  },
  methods: {},
};
</script>

<style scoped lang="less">
.flow-box {
  display: flex;
  align-items: center;
}
</style>